<template>
  <view class="min-h-screen bg-[#f0f0f0] pb-8">
    <!-- 顶部图片区域 - 添加圆角和阴影 -->
    <image class="w-full h-[450rpx] object-cover rounded-b-lg shadow-sm" src="@/assets/imgs/shan.png" mode="aspectFill" />

    <view class="w-[690rpx] mx-auto box-border p-3 bg-[#fff] text-[var(--color-m1)] rounded-lg shadow-sm relative top-[-120rpx] z-10">
      <Text className="block leading-relaxed"> 功德水，是用于供奉佛前、祈福回向的清净之水。我们采用环保便捷的袋装形式，更易于运输、储存与寺院实际供养使用。 </Text>

      <Text className="block leading-relaxed">
        每一袋功德水，皆代表一份真诚的善念。通过本平台，您可将功德水供养至全国各大寺院，由僧众亲自使用于
        <Text className="text-amber-600 font-medium">佛前供水、洒净、法会</Text>
        等功课中。
      </Text>

      <View className="bg-white p-4 mt-2 rounded-md border-l-4 border-amber-400 shadow-sm">
        <Text className="font-medium"> 供养完成后，系统将自动生成您的专属供养记录与电子供养证书，积聚福德，回向自己与亲人，护佑身心平安。 </Text>
      </View>

      <!-- 内容卡片 - 优化卡片样式 -->
      <view class="flex items-start gap-4 mt-6 mb-2" v-for="item in goods" :key="item.id">
        <!-- 商品图片 - 添加边框和圆角 -->
        <image :src="getFullPath(item.image)" class="w-[280rpx] h-[320rpx] rounded-lg border border-gray-100 object-cover" />

        <!-- 商品信息 - 优化排版 -->
        <view class="flex-1 flex flex-col gap-1">
          <!-- 单价行 -->
          <view class="flex items-center">
            <text class="text-gray-600 text-[32rpx]">供养单价：</text>
            <text class="text-red-500 font-bold text-[32rpx]">¥{{ item.price.toFixed(2) }}</text>
          </view>

          <!-- 数量选择器 -->
          <view class="flex items-center">
            <text class="text-gray-600 text-[32rpx]">供养数量：</text>
            <nut-input-number v-model="item.count" min="1" class="text-[32rpx]" />
          </view>

          <!-- 地点选择器 - 优化交互样式 -->
          <picker mode="selector" :range="columns" range-key="text" @change="handleChange" class="active:bg-gray-50">
            <view class="flex items-start py-2">
              <text class="text-gray-600 text-[32rpx] whitespace-nowrap">供养哪里：</text>
              <view class="flex items-center gap-2 flex-1">
                <text class="text-blue-500 text-[32rpx] font-medium">
                  {{ selectedText || "请选择" }}
                </text>
              </view>
            </view>
          </picker>

          <!-- 总额 - 突出显示 -->
          <view class="flex items-center mb-2">
            <text class="text-gray-800 font-medium text-[32rpx]">善款总额：</text>
            <text class="text-red-500 font-bold text-[32rpx]">¥{{ (item.count * item.price).toFixed(2) }}</text>
          </view>

          <nut-button type="warning" class="!w-[200rpx]" size="small">立即供养</nut-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import http from "@/utils/http";
import { ref, onMounted } from "vue";
import { getFullPath } from "@/utils/config";
import Taro, { useShareAppMessage, useShareTimeline } from "@tarojs/taro";
const columns = ref([]);

const count = ref(1);
const selectedText = ref("");
const goods = ref([]);
const company = ref([]);
const selectedCompany = ref({});

// 分享给好友
useShareAppMessage(() => {
  return {
    title: '一键供养 · 积聚福德',
    path: '/pages/about-us/index',
    imageUrl: 'https://docs.taro.zone/img/logo-taro.png'
  }
});

// 分享到朋友圈
useShareTimeline(() => {
  return {
    title: '一键供养 · 积聚福德',
    imageUrl: 'https://docs.taro.zone/img/logo-taro.png'
  }
});

const handleChange = (e) => {
  const index = e.detail.value;
  selectedCompany.value = columns.value[index];
  selectedText.value = selectedCompany.value.text;
};

onMounted(() => {
  console.log("columns", columns);
  getGoods();
  getCompany();
  
  // 显示分享菜单
  Taro.showShareMenu({
    withShareTicket: true
  });
});

function getGoods() {
  http
    .post("/index.php/index/api/index", {
      Func: "getGoods",
    })
    .then((res) => {
      if (res.error === 0) {
        goods.value = [res.data];
        goods.value.forEach((item) => {
          item.price = Number(item.price);
          item.count = 1;
        });
      }
    });
}

function getCompany() {
  http
    .post("/index.php/index/api/index", {
      Func: "getTemple",
    })
    .then((res) => {
      console.log("res", res);
      res.data.forEach((item) => {
        item.text = item.name;
        item.value = item.id;
      });
      columns.value = res.data;
    });
}
</script>

<style lang="scss">
/* 全局样式优化 */
page {
  background-color: #f8fafc;
}
</style>
